<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="108px">
      <el-form-item label="日期" prop="checkDate">
        <el-date-picker clearable size="small" style="width: 200px" v-model="queryParams.checkDate" type="date"
          value-format="yyyy-MM-dd" :picker-options="pickerOptions" placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select v-model="queryParams.classId" filterable placeholder="请选择班级">
          <el-option v-for="item in classList" :key="item.id" :label="item.label" :value="item.id" size="small">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="幼儿姓名" prop="name">
        <el-input v-model="queryParams.name" placeholder="请输入姓名" size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="info" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="studentList">
      <!--    <el-table-column type="selection" width="55" align="center" />-->
      <el-table-column label="序号" align="center" width="50">
        <template slot-scope="scope">
          {{
            scope.$index + (queryParams.pageNum - 1) * queryParams.pageSize + 1
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="班级" prop="className" />
      <el-table-column align="center" label="姓名" prop="name" />
      <el-table-column label="性别" align="center" prop="studentSex">
        <template slot-scope="scope">
          <!-- <dict-tag :options="dict.type.sys_user_sex" :value="scope.row.studentSex==0?'1':'0'"/> -->
          {{
            scope.row.studentSex == 0
            ? "女"
            : scope.row.studentSex == 1
              ? "男"
              : "未知"
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="年龄" prop="studentAge" />

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit"
            @click="showTemperatureDetails(scope.row)">体温记录</el-button>
          <el-button size="mini" type="text" icon="el-icon-info" @click="showEnrollmentLink(scope.row)">体温曲线</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="temperatureDialogVisible" title="体温记录">
      <el-table :data="temperatureData" border>
        <el-table-column label="时间" prop="time"></el-table-column>
        <el-table-column label="体温" prop="temperature">
          <template slot-scope="scoped">
            <div>
              <span :style="scoped.row.temperature > 37.2 ? 'color:red;' : ''">{{ scoped.row.temperature }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="是否发热">
          <template slot-scope="scoped">
            <div>
              <span>{{ scoped.row.temperature > 37.2 ? '是' : '否' }}</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog :visible.sync="temperatureDialogVisible2" title="体温曲线" width="75%">
      <el-button type="primary" size="mini" @click="toggleChartType">
        {{ chartType === 'week' ? '切换到月' : '切换到周' }}
      </el-button>
      <div style="text-align:right ;">
        <span style="font-weight: 600;font-size: 18px;margin-bottom: 10px;display: inline-block;">发热天数：</span> <span
          style="color: red;font-size: 18px;">{{ listNum }}天</span>

      </div>

      <div ref="temperatureChart" :style="{ height: '400px' }"></div>
    </el-dialog>
    <!-- <div ref="temperatureChart" :style="{ height: '400px' }">?</div> -->
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />
  </div>
</template>

<script>
import { selectClazz } from "@/api/base/clazz";
import { abnormalStudents, exportAbnormal } from "@/api/base/ill";
import { formatDateOnly } from "@/utils";
import echarts from 'echarts';

export default {
  name: "gzt",
  dicts: ["sys_user_sex"],
  data() {
    return {
      temperatureDialogVisible: false,
      temperatureDialogVisible2: false,
      chartType: 'week', // 默认为周
      temperatureData: [], // 存放体温数据
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        kigId: this.$store.getters.schoolCode,
        checkDate: formatDateOnly(new Date()),
      },
      // classList:[],
      classList: [
        { id: 1, label: "班级1" },
        { id: 2, label: "班级2" },
        // 添加更多班级数据...
      ],
      studentList: [
        { className: "中一班", name: "段康彤", studentSex: 0, studentAge: '4岁' },
        { className: "中一班", name: "王烁森", studentSex: 1, studentAge: '4岁' },
        { className: "中一班", name: "王骏晨", studentSex: 1, studentAge: '4岁' },
        // 添加更多学生数据...
      ],
      // studentList:[],
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      listNum: null
    };
  },
  mounted() {
    this.initTemperatureChart();
  },
  created() {
    //班级
    this.getQueryClazzList();
    this.getList();
  },
  methods: {

    formatTemperature(row, column, cellValue) {
      const temperature = parseFloat(cellValue);
      if (temperature > 37.5) {
        return `<div style="color: red;">${temperature}</div>`;
      } else {
        return temperature;
      }
    },
    toggleChartType() {
      this.chartType = this.chartType === 'week' ? 'month' : 'week';
      this.initTemperatureChart(); // 切换类型后重新初始化图表
    },
    showTemperatureDetails(row) {
      // 模拟假数据，显示最近七天的数据
      const fakeTemperatureData = [];
      const currentDate = new Date();

      for (let i = 6; i >= 0; i--) {
        const date = new Date(currentDate);
        date.setDate(date.getDate() - i);

        fakeTemperatureData.push({
          time: date.toLocaleDateString(),
          temperature: Math.floor(Math.random() * 3) + 36.5, // 随机生成体温
        });
      }

      this.temperatureData = fakeTemperatureData;
      this.temperatureDialogVisible = true;
    },
    showEnrollmentLink() {
      this.temperatureDialogVisible2 = true;
      this.initTemperatureChart();
    },
    initTemperatureChart() {
      setTimeout(() => {
        // 获取图表容器
        const chartContainer = this.$refs.temperatureChart;
        const chart = echarts.init(chartContainer);

        // 修改X轴数据
        const xAxisData = this.chartType === 'week' ?
          ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] :
          Array.from({ length: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate() }, (_, index) => `${index + 1}号`);

        // 修改Y轴的数据范围
        const yAxisMin = 34;
        const yAxisMax = 40;

        // 提供一组假数据
        const maxTemperatureCount = 2; // 最多允许超过37.5的数据数量
        const data = this.chartType === 'week' ?
          [36.5, 37.0, 36.8, 37.9, 36.9, 37.0, 37.1] : [36.5, 37.0, 36.8, 37.1, 36.9, 36.5, 37.0, 36.8, 36.4, 36.9, 36.5, 37.0, 36.8, 37.1, 36.9, 36.5, 37.0, 36.8, 36.2, 36.9, 36.5, 37.5, 37.5, 36.4, 36.9, 36.5, 37.0, 36.8, 37.0, 36.9];
        // Array.from({ length: xAxisData.length }, (_, index) => {
        //   const temperature = Math.random() * 2 + 36.5;
        //   return index % 3 === 0 && temperature > 37.5 ? 37.5 + Math.random() * 0.5 : temperature;
        // });
        const list = []
        data.forEach(item => {
          if (item > 37.2) {
            list.push(item)
          }
        })
        this.listNum = list.length
        const option = {
          xAxis: {
            type: 'category',
            data: xAxisData,
          },
          yAxis: {
            type: 'value',
            min: yAxisMin,
            max: yAxisMax,
            name: '℃', // 设置Y轴名称
          },
          series: [{
            data: data,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 2, // 调整线条的宽度
              color: '#9dafe6', // 设置折线图的颜色为蓝色
            },
            markPoint: {
              data: data.map((value, index) => ({
                coord: [index, value],
                symbol: value > 37.2 ? 'circle' : 'emptyCircle',
                symbolSize: value > 37.2 ? 10 : 5,
                itemStyle: {
                  color: value > 37.2 ? 'red' : 'blue',
                },
              })),
            },
          }],
        };


        chart.setOption(option);
      }, 0);
    },
    // 导出
    handleExport() {
      this.handleQuery();
      exportAbnormal(this.queryParams).then((response) => {
        this.download(response.msg);
      });
    },
    /** 查询学生列表 */
    async getList() {
      try {
        this.loading = true;
        const data = await abnormalStudents(this.queryParams);

        //   this.studentList = data.rows;
        console.log(this.studentList);
        this.total = data.total;
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    /** 查询班级列表 */
    async getQueryClazzList() {
      try {
        this.loading = true;
        const { rows } = await selectClazz();
        //   this.classList=rows.map(item=>{
        //     return {
        //       id:item.id,
        //       label:item.title,
        //     }
        //   })
        this.loading = false;
      } catch (e) {
        console.log(e);
      }
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.red-color {
  color: red;
}
</style>
